<form id="edit-form" class="layui-form" lay-filter="edit-form" onsubmit="return false;">
    <input type="hidden" name="id" value="#(bean.id??)">
    <input type="hidden" name="deptIds">
    <input type="hidden" name="permissionIds">
    <div class="layui-card">
        <div class="layui-card-body">
            <ul class="layui-timeline">
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis layui-icon-radio"></i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">基本信息</h3>
                        <p>
					        <div class="layui-form-item layui-inline">
					            <label class="layui-form-label required">角色名称</label>
					            <div class="layui-input-inline">
					                <input type="text" name="name" value="#(bean.name??)" lay-verify="required" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
					            </div>
					            <label class="layui-form-label required">状态</label>
					            <div class="layui-input-inline">
					                <input type="radio" name="status" value="ON" title="启用" #if(bean.status?? == 'ON' || bean.status?? == null) checked #end>
					                <input type="radio" name="status" value="OFF" title="禁用" #if(bean.status?? == 'OFF') checked #end>
					            </div>
					        </div>
					        <div class="layui-form-item layui-inline">
					            <label class="layui-form-label required">权限代码</label>
					            <div class="layui-input-inline">
					                <input type="text" name="code" value="#(bean.code??)" autocomplete="off" placeholder="用于角色校验的字串" class="layui-input">
					            </div>
					            <label class="layui-form-label required">排序</label>
					            <div class="layui-input-inline">
					                <input type="text" name="sort" lay-verify="required|number" autocomplete="off" placeholder="小到大排列" class="layui-input" value="#(bean.sort??)">
					            </div>
					        </div>
					        <div class="layui-form-item layui-block">
					            <label class="layui-form-label">备注</label>
					            <div class="layui-input-block">
					                <textarea name="remark" autocomplete="off" placeholder="请输入备注内容" class="layui-textarea">#(bean.remark??)</textarea>
					            </div>
					        </div>
                        </p>
                    </div>
                </li>
                <!-- <li class="layui-timeline-item#if(bean.id??) layui-hide#end">
                    <i class="layui-icon layui-timeline-axis layui-icon-radio"></i>
                    <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">数据权限</h3>
                        <p>
					        <div class="layui-form-item">
					            <label class="layui-form-label required">数据范围</label>
					            <div class="layui-input-inline">
					                <select name="dataScope" lay-verify="required" lay-filter="bean-dataScope">
					                    <option value="">-- 请选择 --</option>
					                #DICTS(type="role_data_scope")
                                    #for(item : dicts)
					                    <option value="#(item.value)"#if(item.value == bean.dataScope??) selected#end>#(item.label)</option>
					                #end
					                </select>
					            </div>
					            <div class="layui-form-mid layui-word-aux"><i class="layui-icon layui-icon-about"></i>&nbsp;特殊情况下，设置为“自定数据权限”</div>
					        </div>
					        <div id="bean-table-div"#if(bean.dataScope?? != 'CUSTOM') style="display: none;"#end>
					        	<div id="dept-tree"></div>
					        </div>
                        </p>
                    </div>
                </li> -->
                <li class="layui-timeline-item#if(bean.id??) layui-hide#end">
                    <i class="layui-icon layui-timeline-axis layui-icon-radio"></i>
                    <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">系统权限</h3>
                        <p>
                            <div id="permission-tree"></div>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
	    <div class="layui-form-item" style="display: none;">
	        <div class="layui-input-block">
				<button id="submit-button" onclick="getCheckedData();" type="submit" class="layui-btn layui-btn-sm" lay-submit lay-filter="submit-button">
	                <i class="layui-icon layui-icon-ok"></i> 提交
	            </button>
	        </div>
	    </div>
    </div>
</form>
#include("/admin/_common/foot.html")

<script type="text/javascript">
layui.use(['jquery', 'form', 'common', 'tree', 'treetable'], function() {
    var $ = layui.jquery, form = layui.form, common = layui.common, tree = layui.tree;
    var deptTreeId = "dept-tree-1";
    var permissionTreeId = "permission-tree-1";
    
    var MODULE_PATH = "#CTX()/admin/system/dept/";
    
    form.on('select(bean-dataScope)', function(data){
        if (data.value=='CUSTOM'){
            $("#bean-table-div").show();
        } else {
            $("#bean-table-div").hide();
        }
    });
    
    /*
     * 从后台获取部门树的完整数据
     */
    window.getDeptTreeData = () => {
        var data = [];
        
        $.ajax({
            url: MODULE_PATH + "tree",    //后台数据请求地址
            type: "get",
            async: false,
            success: function(result){
                data = result;
            }
        });
        
        return data;
    };


    /*
     * 渲染部门树
     */
    window.renderDeptTree = () => {
        var data = getDeptTreeData();
        
        tree.render({
            elem: '#dept-tree',
			data: data,
            id: deptTreeId,
			showCheckbox: true,  // 是否显示复选框
			edit: true,
            accordion: false,
        });
    };

    
    /*
     * 从后台获取权限树的完整数据
     */
    window.getPermissionTreeData = () => {
        var data = [];
        
        $.ajax({
            url: "#CTX()/admin/system/permission/tree",    //后台数据请求地址
            type: "get",
            async: false,
            success: function(result){
                data = result;
            }
        });

		// 展开第一层
		data.forEach((item) => {item.spread = true;});
        
        return data;
    };
    
    /*
     * 渲染权限树
     */
    window.renderPermissionTree = () => {
        var data = window.getPermissionTreeData();
        
        tree.render({
            elem: '#permission-tree',
            id: permissionTreeId,
            data: data,
            method: "get",
            showCheckbox: true,  // 是否显示复选框
            accordion: false,
			customName: {
				title: 'name',
				spread: 'true',
			},
        });
    };
    
    
    /*
     * 获取树中当前被选择的部门和权限数据，存放到表单的指定input中
     */
    window.getCheckedData = () => {
        //$("[name='deptIds']").val(window.tree.getCheckedIds(deptTreeId).join());
        $("[name='permissionIds']").val($.tree.getCheckedIds(permissionTreeId).join());
    };
    
    /*
     * 页面加载完成时加载树控件数据
     */
    $(document).ready(() => {
        //window.renderDeptTree();
        window.renderPermissionTree();
    });
    
});
</script>
